<template>
  <div>
    <div v-show="!showDetail">
      <template v-if="List.length > 0">
        <el-row class="list-row mb10 curp" v-for="(item,index) in List" :key="index">
          <el-col>
            <el-checkbox @click.stop @change="e => handleCheckChange(e,item)" class="fl" />
            <i
              :class="[ item.readFlag === 1 ? 'el-icon-yidu' : 'el-icon-weidu', 'fl fs16 ml10 mr10 mt3']"
            ></i>
            <h3
              @click="handleListClick(item)"
              class="ml30"
            >[{{ item.readFlag === 0 ? '未读通知' : '已读通知' }}] {{ item.title }}</h3>
          </el-col>
          <el-col :span="6">
            <p>
              <span>发送人：</span>
              {{ item.sender }}
            </p>
          </el-col>
          <el-col :span="6">
            <p>
              <span>发送时间：</span>
              {{ formatTime( item.sendTime ) }}
            </p>
          </el-col>
          <el-col :span="6">
            <span class="mr10">已读人数：{{ item.map && item.map.finishSum ? item.map.finishSum : 0 }}</span>
            <span>未读人数：{{ item.map && item.map.notFinishSum ? item.map.notFinishSum : 0 }}</span>
          </el-col>
          <el-col>
            <p>{{ item.content }}</p>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <empty-comp />
      </template>
    </div>
    <!-- <div v-show="showDetail">
      <list-detail @back="handleBack" ref="listDetail" />
    </div>-->
  </div>
</template>

<script>
import EmptyComp from '@/components/EmptyComp'
// import ListDetail from '../detail'
export default {
  components: {
    EmptyComp
    // ListDetail
  },
  data() {
    return {
      chosedArr: [],
      showDetail: false
    }
  },
  props: {
    List: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleListClick(item) {
      console.log('item', item)
      this.$emit('showDetail', item)
      // this.showDetail = true
      // this.$refs.listDetail.edit(item)
      // this
    },
    handleBack() {
      console.log('back')

      this.showDetail = false
    },
    handleCheckChange(e, item) {
      if (e) {
        this.chosedArr.push(item)
      } else {
        const index = this.chosedArr.findIndex(v => v.notifyId === item.notifyId)
        this.chosedArr.splice(index, 1)
      }
      console.log('item', item, this.chosedArr)
      this.$emit('chosedOne', this.chosedArr)
    },
    reset() {
      this.chosedArr = []
    }
  }
}
</script>

<style scoped>
.mt3 {
  margin-top: 3px;
}
.list-row {
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
}
.list-row:last-child {
  border: none;
}
</style>